import React, { useEffect, useState, useRef } from "react";
import './index.css';
import { Form, Input, Button, Checkbox } from 'antd';
import { BulbTwoTone } from '@ant-design/icons'
import login from '../../image/login.jpg';
import { useNavigate, Link } from "react-router-dom";
import { http, post } from '../utils'
import Auth from '../../component/Auth'
import API from '../../init/api'


const Login = (props) => {

    const { logins, logouts } = Auth() // Auth() 返回当前的 context 值
    const [Login] = Form.useForm()  //Form实例
    const [name, setName] = useState()
    const [password, setPassword] = useState()
    const [isRemember, setIsRemember] = useState()
    const [isShow, setIsShow] = useState(false)
    const navigate = useNavigate()
    // useEffect(() => {
    //     Login.setFieldsValue({
    //         username: 'admin',
    //         password: '1234',
    //     })
    // }, [isRemember])

    const handleSubmit = (val) => {
        console.log('11111111', name, password)
        let params =  {
            username: name,
             password:password,
         }
        post(API.INITIAL_LOGIN,params).then(res => {
             if (res.status === 0) {
                 console.log(res)
                 localStorage.setItem('token',res.token)
                 logins()
                 navigate('/react')
             }

         }).finally(() => {
             console.log('finally')
         })
    }


    return (
        <div id="login">
            <img id='img' src={login} alt="登陆"></img>
            <div id="box">
                <div id='content'>
                    <Form className="login-form" form={Login} requiredMark={false}>
                        <Form.Item
                            name='username'
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input
                                prefix={<BulbTwoTone />}
                                placeholder="Username"
                                onBlur={val => { setName(val.target.value) }}

                            />
                        </Form.Item>
                        <Form.Item
                            name='password'
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input
                                prefix={<BulbTwoTone />}
                                type="password"
                                placeholder="Password"
                                onChange={val => { setPassword(val.target.value) }}
                            />
                        </Form.Item>

                        {isShow && <p style={{ color: 'red', marginTop: '-20px' }}>用户名或密码错误</p>}

                        <Form.Item>
                            <Checkbox onChange={val => { setIsRemember(val.target.checked) }}>Remember me</Checkbox>
                            <a className="login-form-forgot" href="">
                                Forgot password
                            </a>
                            <Button type="primary" htmlType="submit" className="login-form-button" onClick={handleSubmit}>
                                登陆
                            </Button>
                            Or <Link to='/registered'>注册</Link>
                        </Form.Item>
                    </Form>
                </div>
            </div>

        </div>
    )

}

export default Login